<script lang="ts" setup>
import { inject } from 'vue'
import CodeMirrorEditor from '../codeMirrorEditor/index.vue'
import { componentWithOptions } from '../componentPanel'
import EditEvent from './editEvent/index.vue'
import SetOptIonData from './setOptIonData.vue'
import SetRule from './setRule/index.vue'

const selectComponent = inject('selectComponent') as any
const rules = ref({
  name: [
    { required: true, message: '请输入表单名称', trigger: 'blur' },
  ],
})
</script>

<template>
  <ElForm :model="selectComponent" :rules="rules" label-width="100px" label-position="top">
    <ElFormItem label="栅格列数">
      <ElInput v-model="selectComponent.span" placeholder="请输入栅格列数" />
    </ElFormItem>
    <ElFormItem label="Label名称">
      <ElInput v-model="selectComponent.label" placeholder="请输入Label名称" />
    </ElFormItem>
    <ElFormItem label="Label宽度">
      <ElInput v-model="selectComponent.labelWidth" placeholder="请输入Label名称" />
    </ElFormItem>
    <ElFormItem label="字段名称">
      <ElInput v-model="selectComponent.field" placeholder="请输入字段名称" />
    </ElFormItem>
    <ElFormItem label="默认值">
      <ElInput v-model="selectComponent.defaultValue" placeholder="请输入默认值" />
    </ElFormItem>
    <!-- <ElFormItem label="是否禁用">
      <ElSwitch v-model="JSON.parse(selectComponent.attrs).disabled" />
    </ElFormItem> -->
    <ElDivider />
    <ElFormItem v-if="selectComponent.rules" label="验证规则">
      <SetRule />
    </ElFormItem>
    <template v-if="componentWithOptions.includes(selectComponent.component)">
      <ElFormItem label="选项数据">
        <SetOptIonData />
      </ElFormItem>
    </template>
    <ElDivider />
    <ElFormItem v-if="selectComponent.attrs" label="Attributes">
      <CodeMirrorEditor v-model="selectComponent.attrs" />
    </ElFormItem>
    <ElFormItem label="事件配置">
      <EditEvent />
    </ElFormItem>
  </ElForm>
</template>
